<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据采集结果</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .result-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .result-header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 30px;
            border-radius: 15px 15px 0 0;
            text-align: center;
            margin-bottom: 20px;
        }
        .result-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .summary-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .city-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .status-badge {
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 500;
        }
        .status-success {
            background-color: #d4edda;
            color: #155724;
        }
        .status-failed {
            background-color: #f8d7da;
            color: #721c24;
        }
        .status-error {
            background-color: #fff3cd;
            color: #856404;
        }
        .data-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .data-item:last-child {
            border-bottom: none;
        }
        .data-label {
            font-weight: 500;
            color: #6c757d;
        }
        .data-value {
            font-weight: 500;
        }
        .back-button {
            margin-top: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="result-container">
        <div class="result-header">
            <h1><i class="bi bi-cloud-download me-2"></i>数据采集结果</h1>
            <p class="lead">多城市天气数据采集完成</p>
        </div>

        <div class="result-card">
            <div class="summary-card">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <div class="display-4 text-success">{{ success_count }}</div>
                        <div class="text-muted">成功采集</div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="display-4 text-danger">{{ failed_count }}</div>
                        <div class="text-muted">采集失败</div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="display-4 text-primary">{{ total_time }}秒</div>
                        <div class="text-muted">总耗时</div>
                    </div>
                </div>
            </div>

            {% for result in results %}
            <div class="city-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3>{{ result.city }}</h3>
                    <span class="status-badge
                        {% if result.status == 'success' %}status-success{% endif %}
                        {% if result.status == 'failed' %}status-failed{% endif %}
                        {% if result.status == 'error' %}status-error{% endif %}">
                        {% if result.status == 'success' %}
                            <i class="bi bi-check-circle me-1"></i> 采集成功
                        {% elif result.status == 'failed' %}
                            <i class="bi bi-x-circle me-1"></i> 采集失败
                        {% else %}
                            <i class="bi bi-exclamation-triangle me-1"></i> 采集错误
                        {% endif %}
                    </span>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="data-item">
                            <span class="data-label">状态:</span>
                            <span class="data-value">
                                {% if result.status == 'success' %}
                                    成功
                                {% elif result.status == 'failed' %}
                                    失败: {{ result.reason }}
                                {% else %}
                                    错误: {{ result.reason }}
                                {% endif %}
                            </span>
                        </div>
                        <div class="data-item">
                            <span class="data-label">耗时:</span>
                            <span class="data-value">{{ result.time_cost }}秒</span>
                        </div>
                    </div>

                    {% if result.status == 'success' %}
                    <div class="col-md-6">
                        <div class="data-item">
                            <span class="data-label">温度:</span>
                            <span class="data-value">{{ result.temperature }}°C</span>
                        </div>
                        <div class="data-item">
                            <span class="data-label">湿度:</span>
                            <span class="data-value">{{ result.humidity }}%</span>
                        </div>
                        <div class="data-item">
                            <span class="data-label">风速:</span>
                            <span class="data-value">{{ result.wind_speed }}m/s</span>
                        </div>
                        <div class="data-item">
                            <span class="data-label">更新时间:</span>
                            <span class="data-value">{{ result.timestamp }}</span>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}

            <div class="back-button p-4">
                <a href="/api/weather/home" class="btn btn-primary">
                    <i class="bi bi-arrow-left me-2"></i> 返回首页
                </a>
            </div>
        </div>
    </div>
</body>
</html>